<template>
  <div id="visitor">
    <div id="visitorPie" class="" style="width:90%;height:550px;"></div>
  </div>
</template>
<script>
  import echarts from 'echarts/lib/echarts'
  // 引入饼图组件
  import 'echarts/lib/chart/pie'
  // 引入提示框和图例组件
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import api from '@/api/center'

  export default {
    data() {
      return {
        pieData: {},//用户分布信息
      }
    },
    watch: {
      pieData: function () {
        this.initData()
      }
    },
    mounted() {
      this.myChart = echarts.init(document.getElementById('visitorPie'));
      api.queryDistribute().then(res => {
        if (res.status === 1) {
          this.pieData = res.user_city;
          this.initData();
        }
      });
    },
    methods: {
      initData() {
        const option = {
          title: {
            text: '用户分布',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['北京', '上海', '深圳', '杭州', '其他']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                  funnel: {
                    x: '25%',
                    width: '50%',
                    funnelAlign: 'left',
                    max: 1548
                  }
                }
              },
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: [
                {value: this.pieData.beijing, name: '北京'},
                {value: this.pieData.shanghai, name: '上海'},
                {value: this.pieData.shenzhen, name: '深圳'},
                {value: this.pieData.hangzhou, name: '杭州'},
                {value: this.pieData.qita, name: '其他'}
              ]
            }
          ]
        };
        this.myChart.setOption(option);
      }
    }
  }
</script>
<style lang="stylus" scoped>
  #visitor {
    display flex
    justify-content: center
    margin-top 30px
  }
</style>
